<template>
	<view :data-theme="theme()" :class="theme() || ''" class="article-detail" v-if="loadding">
		<view class="article-content" v-html="article.article_content"></view>
		<!-- 底部复选框和提交按钮 -->
		<view class="footer">
		  <!-- 复选框 -->
		  <checkbox-group v-model="agreed" @change="handleCheckboxChange">
		      <checkbox value="agree" /> 我同意协议
		  </checkbox-group>
		  <!-- 提交按钮 -->
		  <button @click="handleSubmit" :disabled="!agreed">提交</button>
		</view>
	</view>
</template>

<script>
import utils from '@/common/utils.js';
import AppShare from '@/components/app-share.vue';
export default {
	components: {
		AppShare
	},
	data() {
		return {
			agreed: false,   // 复选框是否选中
			agent_category_id:0,
			/*是否加载完成*/
			loadding: false,
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			/*文章id*/
			article_id: 0,
			/*文章详情*/
			article: {
				image: {}
			},
			urldata: '',
			/*app分享*/
			isAppShare: false,
			appParams: {
				title: '',
				summary: '',
				path: ''
			}
		};
	},
	onLoad() {
		/*分类id*/
		this.article_id = 10009;
		//#ifdef H5
		if (this.isWeixin()) {
			this.urldata = window.location.href;
		}
		//#endif
	},
	onShow() {
		/*获取产品详情*/
		this.getAgentCategoryData();
	},
	mounted() {
		/*获取产品详情*/
		this.getData();
		
	},
	methods: {
		// 处理复选框变化
		handleCheckboxChange(e) {
		  // e.detail.value 是一个包含所有选中项值的数组，判断是否有选中 "agree"
		  this.agreed = e.detail.value.includes('agree');
		},
		// 提交按钮点击事件
		handleSubmit() {
		  if(!(this.agent_category_id) || this.agent_category_id == '0'){
			this.showError('系统异常,请联系客服!')
			return false
		  }
		  if (this.agreed) {
			// 处理提交逻辑
			console.log('已同意，提交成功');
			this.gotoPage('/pages/index/agentproduct?category_id='+this.agent_category_id)
		  } else {
			console.log('请同意用户协议');
		  }
		},
		/*获取文章详情*/
		getData() {
			let self = this;
			uni.showLoading({
				title: '加载中'
			});
			self.loading = true;
			let article_id = self.article_id;
			self._get(
				'plus.article.article/detail',
				{
					article_id: article_id,
					url: self.urldata
				},
				function(res) {
					/*详情内容格式化*/
					res.data.detail.article_content = utils.format_content(res.data.detail.article_content);
					console.log(res.data.detail.article_content);
					self.article = res.data.detail;
					// 配置微信分享参数
					//#ifdef H5
					if (self.url != '' && self.isWeixin()) {
						let params = {
							article_id: self.article_id
						};
						self.configWx(res.data.share.signPackage, res.data.share.shareParams, params);
					}
					//#endif
					self.loadding = true;
					uni.hideLoading();
				}
			);
		},
		/*获取升级经销商ID*/
		getAgentCategoryData() {
			let self = this;
			self.loading = true;
			let article_id = self.article_id;
			self._get('product.category/fx_grade_category',{},
				function(res) {
					console.info(res)
					self.agent_category_id = res.data
				}
			);
		}
		
	}
};
</script>

<style>
page {
    background-color: #fff !important;
    font-size: 24rpx;
}
.article-detail {
	padding: 30rpx;
	background: #ffffff;
}

.article-detail .title {
	font-size: 44rpx;
}

.article-detail .info {
	padding: 40rpx 0;
	color: #999999;
}

.article-detail .article-content {
	width: 100%;
	box-sizing: border-box;
	line-height: 60rpx;
	font-size: 34 rpx;
	overflow: hidden;
}
.article-detail .article-content image,
.article-detail .article-content img {
	display: block;
	max-width: 100%;
}
.share-box {
	background: none;
}
.share_img {
	width: 32rpx;
	height: 32rpx;
}
.footer {
  display: flex;
  flex-direction: column;  /* 垂直布局 */
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  margin-top: 20px;
}

button {
  width: 100%;
  margin-top: 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  margin-top: 10px;        /* 给按钮和复选框之间添加间距 */
  border-radius: 25px;     /* 圆角效果 */
}

button:disabled {
  background-color: #B0BEC5;
  cursor: not-allowed;
}
</style>
